<template>
  <div class="detail">
    <GobackNav />
    <img class="pre" :src="list.albums" alt />
    <h3>{{list.title}}</h3>
    <p class="pai">{{list.imtro}}</p>
    <h4>用料:</h4>
    <ul class="ul">
      <li>{{list.ingredients}}</li>
      <li>{{list.burden}}</li>
    </ul>
    <div v-for="item of arr" :key="item.id">
      <img class="fund" :src="item.img" alt />
      <p class="turb">{{item.step}}</p>
    </div>
  </div>
</template>



<script>
import GobackNav from "../components/nav/nav.vue";
export default {
  props: {
    id: { type: String }
  },
  name: "detail",
  data() {
    return {
      arr: [],
      list: {}
    };
  },
  components: {
    GobackNav
  },
  mounted() {
    axios({
      url: "/json/cell.json"
    }).then(res => {
      if (res.data.reason === "Success") {
        res.data.result.data.forEach((item, key) => {
          if (item.id == this.id) {
            this.list = res.data.result.data[key];
            this.arr = this.list.steps;
          }
        });
      }
    });
     axios({
      url: "/json/losa.json"
    }).then(res => {
      if (res.data.reason === "Success") {
        res.data.result.data.forEach((item, key) => {
          if (item.id == this.id) {
            this.list = res.data.result.data[key];
            this.arr = this.list.steps;
          }
        });
      }
    });

  },
  updated() {},
  methods: {}
};
</script>


<style scope>
img {
  display: block;
}
.pre {
  width: 100%;
  margin-top: 2rem;
}
h3 {
  text-align: center;
  font-size: 1.25rem;
}
.pai {
  text-align: left;
  font-size: 0.875rem;
  margin-top: 0.3125rem;
  margin-bottom: 0.3125rem;
}
h4 {
  font-size: 0.875rem;
}
.ul {
  width: 100%;
  overflow: hidden;
  font-size: 0.75rem;
  padding: 0.8125rem;
}
li {
  width: 100%;
  height: 20px;
}
.fund {
  width: 15.625rem;

  margin: 0 auto;
  margin-top: 1.25rem;
}
.turb {
  font-size: 0.875rem;
  margin-left: 2.1875rem;
  margin-top: 0.625rem;
}
</style>